<template>
  <el-container>
    <el-main>
      <el-form ref="formRef" :model="form.model" :rules="rules">
        <el-form-item label="审核结果">
          <el-radio-group v-model="form.model.audit_status">
            <el-radio value="reject">审核驳回</el-radio>
            <el-radio value="normal">审核通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="驳回原因" prop="remarks" v-if="show">
          <el-input v-model="form.model.remarks" type="textarea" placeholder="请输入驳回原因" />
        </el-form-item>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button type="primary" @click="confirm">确定</el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
  import { reactive, ref, unref, computed } from 'vue';
  import { api } from './industry.service';

  const show = computed(() => {
    return form.model.audit_status === 'reject';
  });

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);

  const formRef = ref();
  const form = reactive({
    model: {
      audit_status: 'normal',
      remarks: '',
    },
  });

  const rules = reactive({
    remarks: [
      { required: true, message: '请输入驳回原因', trigger: 'blur' },
    ],
  });


  function confirm() {
    unref(formRef).validate(async (valid) => {
      if (!valid) return;
      const { error } = await api.audit(props.modal.params.id, form.model);
      if (error === 0) {
        emit('modalCallBack', { event: 'confirm' });
      }
    });
  }
</script>
